<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar title="公告" />
			
      <view class="move-area">
        <wk-scroll-view
          v-if="!refreshPage"
          :status="listStatus"
          class="list-scroll"
          @refresh="getList({}, true)"
          @loadmore="getList()">
          <notice-item
            v-for="(item, index) in listData"
            :key="index"
            :item-data="item" />
        </wk-scroll-view>
      </view>
    </view>
		
    <wk-drag-button
      v-if="showAddBtn"
      @click="handleAdd">
      <view class="wk-drag-btn">
        <text class="wk wk-plus icon" />
      </view>
    </wk-drag-button>
  </view>
</template>

<script>
  import {QueryList} from 'API/oa/notice'
  import NoticeItem from './components/noticeItem'
  import mainListMixins from '@/mixins/mainList.js'

  export default {
    name: 'NoticeIndex',
    components: {
      NoticeItem
    },
    mixins: [mainListMixins],
    data() {
      return {
        GetListFn: QueryList,

        refreshPage: false,
      }
    },
    computed: {
      showAddBtn() {
        return this.$auth('oa.announcement.save')
      }
    },
    onLoad() {
      this.getList()
    },
    onShow() {
      if (this.refreshPage) {
        this.refreshPage = false
        this.getList({}, true)
      }
    },
    methods: {
      handleAdd() {
        this.$Router.navigateTo('/pages_oa/notice/add')
      }
    }
  }
</script>

<style scoped lang="scss">
	.main-container {
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.move-area {
			width: 100%;
			flex: 1;
			padding: 20rpx 0;
			overflow: hidden;
			.list-scroll {
				width: 100%;
				height: 100%;
				.notice-item:last-child {
					/deep/ .wk-list-item::after {
						display: none;
					}
				}
			}
		}
	}
</style>
